<template>
	<view class="container">
		<view class="item-info">
			<!-- <view class="header">订单信息</view> -->
			<view class="sec">
				<view>订单编号</view>
				<view>{{data.o_sn}}</view>
			</view>
			<view class="sec">
				<view>下单时间</view>
				<view>{{data.created_time|dateFormat}}</view>
			</view>
		</view>
		<view class="item-info">
			<view class="header">装货信息</view>
			<view class="sec">
				<view>装货地址</view>
				<view>{{data.start_province}}{{data.start_city}}{{data.start_distinct}}{{data.start_address}}</view>
			</view>
			<view class="sec">
				<view>联系人</view>
				<view>{{data.start_name}}</view>
			</view>
			<view class="sec">
				<view>联系人电话</view>
				<view>{{data.start_phone}}</view>
			</view>
		</view>
		<view class="item-info">
			<view class="header">卸货信息</view>
			<view class="sec">
				<view>卸货地址</view>
				<view>{{data.end_province}}{{data.end_city}}{{data.end_distinct}}{{data.end_address}}</view>
			</view>
			<view class="sec">
				<view>联系人</view>
				<view>{{data.end_name}}</view>
			</view>
			<view class="sec">
				<view>联系人电话</view>
				<view>{{data.end_phone}}</view>
			</view>
		</view>
		<view class="item-info">
			<view class="header">用车信息</view>
			<view class="sec">
				<view>货物名称</view>
				<view>{{data.name}}</view>
			</view>
			<view class="sec">
				<view>装货时间</view>
				<view>{{data.setup_time}}</view>
			</view>
			<view class="sec">
				<view>包装方式</view>
				<view>{{data.wrap_way}}</view>
			</view>
			<view class="sec">
				<view>体重</view>
				<view>{{data.weight_start == data.weight_end?data.weight_start:data.weight_start+"-"+data.weight_end}}吨</view>
			</view>
			<view class="sec">
				<view>体积</view>
				<view>{{data.volumn_start == data.volumn_end?data.volumn_start:data.volumn_start+"-"+data.volumn_end}}方</view>
			</view>
			<view class="sec">
				<view>车型车长</view>
				<view>{{data.car_type_len}}</view>
			</view>
			<view class="sec">
				<view>预估距离</view>
				<view>{{data.distance/1000.0}}公里</view>
			</view>
			<view class="sec">
				<view>预估费用</view>
				<view v-if="data.is_elec == 0">{{data.eva_price_min == data.eva_price_max?data.eva_price_min:data.eva_price_min+'-'+data.eva_price_max}}元</view>
				<view v-else>电议</view>
			</view>
			<view class="sec">
				<view>类型</view>
				<view v-if="data.type== 0">普通发货</view>
				<view v-else>零担发货</view>
			</view>
			<view class="sec">
				<view>保证金</view>
				<view>{{data.order_amount}}元</view>
			</view>
		</view>
		<view class="item-info" v-if="data.order_amount > 0" style="display: none;">
			<view class="header">支付信息</view>
			<view class="sec">
				<view>用户保证金</view>
				<view>
					{{data.order_amount}}元
					<template v-if="data.user_order_status == 0">
						【无保证金】
					</template>
					<template v-if="data.user_order_status == 1">
						【待支付】
					</template>
					<template v-if="data.user_order_status == 2">
						【已支付】
					</template>
					<template v-if="data.user_order_status == 3">
						【申请中】
					</template>
					<template v-if="data.user_order_status == 4">
						【已拒绝】
					</template>
					<template v-if="data.user_order_status == 5">
						【已退款】
					</template>
				</view>
			</view>
			<view class="sec">
				<view>司机保证金</view>
				<view>
					{{data.order_amount}}元
					<template v-if="data.driver_order_status == 0">
						【无保证金】
					</template>
					<template v-if="data.driver_order_status == 1">
						【待支付】
					</template>
					<template v-if="data.driver_order_status == 2">
						【已支付】
					</template>
					<template v-if="data.driver_order_status == 3">
						【申请中】
					</template>
					<template v-if="data.driver_order_status == 4">
						【已拒绝】
					</template>
					<template v-if="data.driver_order_status == 5">
						【已退款】
					</template>
				</view>
			</view>
		</view>
		<view class="total-info" v-if="data.is_elec == 0">
			预估费用：{{data.self_amount}}元
		</view>
		<view class="padbottom50"></view>
		<view class="footer" v-if="data.is_receive == 0 || data.status == 1"> 
			<view class="buy" @click="receiveOrder()">立即接单</view>
		</view>
	</view>
</template>

<script>
	import {toLogin} from "@/libs/login.js";
	import {mapGetters} from "vuex";
	import {logis_detail,receiveOrder} from '@/api/driver.js';
	import {depositPay,cancel,replyOrderAmount,cancelReplyOrderAmount} from "@/api/logistic_order.js";
	export default {
		components: {
			
		},
		data() {
			return {
				data:{
					price:0.0,
					name:'',
					num:0,
					car_type_len:'',
					created_time:'',
					distance:'',
					driver_order_status:0,
					end_address:'',
					end_city:'',
					end_distinct:'',
					end_name:'',
					end_phone:'',
					end_province:'',
					eva_price_max:0,
					eva_price_min:0,
					name:'',
					o_sn:'',
					order_amount:0,
					remark:'',
					setup_time:'',
					start_address:'',
					start_city:'',
					start_distinct:'',
					start_name:'',
					start_phone:'',
					start_province:'',
					status:0,
					wrap_way:'',
					volumn_end:0,
					volumn_start:0,
					weight_end:0,
					weight_start:0,
					is_receive:1
				},
				id:0,
				operationing:false,//操作中
			}
		},
		computed: mapGetters(["isLogin"]),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV == true) {
						console.info(111)
						// this.getCouponList();
						// this.getCartCount();
						// this.downloadFilePromotionCode();
					}
				},
				deep: true,
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getData();
		},
		methods: {
			getData(){
				let that = this;
				uni.showLoading({
					title:'加载中...'
				});
				logis_detail(this.id).then((res) => {
					let data = res.data;
					that.data = data;
					uni.hideLoading();
				});
			},
			//接单
			receiveOrder(){
				
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定接单？',
				    success: function (res) {
				        if (res.confirm) {
							
							that.operationing = true;
							uni.showLoading({
								title: '正在处理',
							})
							receiveOrder(that.id).then(res => {
								console.info(res.data)
								that.operationing = false;
								uni.hideLoading();
								if(res.status == 200){
									uni.reLaunch({
										url:'/pages/driver/square/result?type=success'
									})
								}else{
									uni.showToast({
										icon:'error',
										title:res.msg
									})
								}
							}).catch(err => {
								that.operationing = false;
								uni.hideLoading();
								return that.$util.Tips({
									title: err
								})
							});
							
						}
					},
				});
			},
			//评价
			commentOrder(){
				
			},
			//支付保证金
			payOrder(){
				if(this.operationing){
					return;
				}
				if(!this.id){
					uni.showToast({
						icon:"error",
						title:'缺失订单id'
					})
					return;
				}
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定支付保证金？',
				    success: function (res) {
				        if (res.confirm) {
							that.operationing = true;
							uni.showLoading({
								title: '正在支付',
							})
							depositPay({id: that.id}).then(res => {
								console.info(res.data.data)
								uni.hideLoading();
								let jsConfig = res.data.data;
								let appId = jsConfig.appId;
								let timeStamp = jsConfig.timeStamp;
								let nonceStr = jsConfig.nonceStr;
								let packageX = jsConfig.package;
								let signType = jsConfig.signType;
								let paySign = jsConfig.paySign;
								
								console.info(appId, "appId")
								console.info(timeStamp, "timeStamp")
								console.info(nonceStr, "nonceStr")
								console.info(packageX, "package")
								console.info(signType, "signType")
								
								uni.requestPayment({
									timeStamp: jsConfig.timestamp,
									nonceStr: jsConfig.nonceStr,
									package: jsConfig.package,
									signType: jsConfig.signType,
									paySign: jsConfig.paySign,
									provider: 'wxpay',
									orderInfo: jsConfig,
									success: function(res) {
										that.operationing = false;
										that.getData();
										uni.showToast({
											icon:'success',
											title:'支付成功'
										})
									},
									fail: function(e) {
										that.operationing = false;
										console.info(e)
										uni.showToast({
											icon:'success',
											title:'支付失败'
										})
									},
									complete: function(res) {
										that.operationing = false;
										if (res.errMsg == 'requestPayment:cancel') return that.$util.Tips({
											title: that.$t(`取消支付`)
										});
									}
								})
							}).catch(err => {
								that.operationing = false;
								uni.hideLoading();
								return that.$util.Tips({
									title: err
								})
							});
				        }//end if
				    }//end success method
				});
			},
			//申请退保证金
			replyRefund(){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定申请退款保证金？',
				    success: function (res) {
				        if (res.confirm) {
							that.operationing = true;
							uni.showLoading({
								title: '正在处理',
							})
							replyOrderAmount(that.id).then(res => {
								console.info(res.data)
								that.operationing = false;
								uni.hideLoading();
								if(res.status == 200){
									that.getData();
									uni.showToast({
										icon:'success',
										title:res.msg
									})
								}else{
									uni.showToast({
										icon:'error',
										title:res.msg
									})
								}
							}).catch(err => {
								that.operationing = false;
								uni.hideLoading();
								return that.$util.Tips({
									title: err
								})
							});
						}
					},
				});
			},
			//取消申请
			cancelReplyRefund(){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定取消退款保证金？',
				    success: function (res) {
				        if (res.confirm) {
							that.operationing = true;
							uni.showLoading({
								title: '正在处理',
							})
							cancelReplyOrderAmount(that.id).then(res => {
								console.info(res.data)
								that.operationing = false;
								uni.hideLoading();
								if(res.status == 200){
									that.getData();
									uni.showToast({
										icon:'success',
										title:res.msg
									})
								}else{
									uni.showToast({
										icon:'error',
										title:res.msg
									})
								}
							}).catch(err => {
								that.operationing = false;
								uni.hideLoading();
								return that.$util.Tips({
									title: err
								})
							});
						}
					},
				});
			},
			//支付费用
			pay(){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定支付费用？',
					success: function (res) {
						if (res.confirm) {
							
						}
					},
				});
			}
		},
		 //时间戳的处理    
		filters: {
			dateFormat: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "-" + month + "-" + sdate + ' ' + hour + ':' + minute
				// 返回
				return result;
			},
			formatDate: function(value) {
				var date = new Date(value);
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				if(month < 10){
					month = "0" + month;
				}
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time =year + "-" + month + "-" + date.getDate() +
					" " + hours + ":" + minutes;
				return time;
			}
 
		},
	}
</script>

<style lang="scss" scope>
	.container {
		background-color: #F5F5F5;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom); 
	}
	.topinfo{
		display: flex;
		flex-direction: row;
		background-color: white;
		justify-content: center;
		margin-top: 20rpx;
		.status{
			color: red;
			font-size: 30rpx;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
		}
	}//topinfo end
	
	.order-detail{
		padding: 30rpx 30rpx 0rpx 30rpx;
		margin-top: 20rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
		.header{
			font-size: 28rpx;
			font-weight: bold;
			color: black;
			margin-bottom: 30rpx;
		}
		.sec{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			height: 120rpx;
			border-bottom: 1rpx solid #F5F5F5;
			.left{
				display: flex;
				flex-direction: row;
				align-items: center;
				.cover{
					width: 80rpx;
					height: 80rpx;
					margin-right: 15rpx;
				}
				
			}
		}
	}
	.item-info{
		padding: 30rpx 30rpx 0rpx 30rpx;
		margin-top: 20rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
		.header{
			font-size: 28rpx;
			font-weight: bold;
			color: black;
			margin-bottom: 30rpx;
		}
		.sec{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			height: 80rpx;
			border-bottom: 1rpx solid #F5F5F5;
			line-height: 80rpx;
			.cover{
				width: 80rpx;
				height: 80rpx;
				background-color: red;
			}
		}
	}
	.total-info{
		padding: 30rpx 30rpx 30rpx 30rpx;
		margin-top: 20rpx;
		background-color: white;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		color: red;
		font-size: 32rpx;
	}
	.padbottom50{
		height:250rpx;
	}
	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		z-index: 277;
		border-top: 1rpx solid #f0f0f0;
		height: 100rpx;
		height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		.buy{
			width: 95%;
			height: 70rpx;
			border-radius: 35rpx;
			background-color: red;
			color: white;
			font-size: 28rpx;
			text-align: center;
			line-height: 70rpx;
		}
	}
</style>
